<template>
  <div v-if="props.type === 'radio'" class="flex items-center justify-between">
    <div v-if="value > 0" class="cursor-pointer" :style="btnWidthAndHeight" @click="remove">
      <img :src="minusProduct" alt="" />
    </div>
    <div v-else :style="btnWidthAndHeight" class="cursor-pointer">
      <img :src="disableMinusProduct" alt="" />
    </div>
    <div class="px-16px leading-20px" :style="computedStyle">
      {{ value }}
    </div>
    <div
      v-if="!props.maxValue || value < props.maxValue"
      class="cursor-pointer"
      :style="btnWidthAndHeight"
      @click.stop="add"
    >
      <img :src="addProduct" alt="" />
    </div>
    <div v-else class="cursor-pointer" :style="btnWidthAndHeight">
      <img :src="disableAddProduct" alt="" />
    </div>
  </div>
  <div v-if="props.type === 'square'" class="flex">
    <div
      class="bg-detail w-40px h-40px text-center flex items-center justify-center rounded-l-4px"
      :class="{ 'cursor-pointer': canRemove, 'cursor-not-allowed': !canRemove }"
      @click.stop="remove"
    >
      <div v-if="value > 1" class="w-12px h-2px rounded-8px bg-secondary"></div>
      <div v-else class="w-12px h-2px rounded-8px bg-disable"></div>
    </div>
    <div
      class="mx-4px w-73px h-40px text-center bg-white color-word font-medium text-16px leading-40px"
    >
      {{ value }}
    </div>
    <div
      class="bg-detail w-40px h-40px text-center flex items-center justify-center rounded-r-4px cursor-pointer"
      :class="{
        'cursor-pointer': canAdd,
        'cursor-not-allowed': !canAdd
      }"
      @click.stop="add"
    >
      <div v-if="!maxValue || value < maxValue" class="w-12px h-12px relative">
        <div class="w-2px h-12px rounded-8px bg-secondary absolute left-5px top-0"></div>
        <div class="w-12px h-2px rounded-8px bg-secondary absolute left-0 top-5px"></div>
      </div>
      <div v-else class="w-12px h-12px relative">
        <div class="w-2px h-12px rounded-8px bg-disable absolute left-5px top-0"></div>
        <div class="w-12px h-2px rounded-8px bg-disable absolute left-0 top-5px"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'
import addProduct from '@renderer/assets/addProduct.svg'
import minusProduct from '@renderer/assets/minusProduct.svg'
import disableAddProduct from '@renderer/assets/disableAddProduct.svg'
import disableMinusProduct from '@renderer/assets/disableMinusProduct.svg'
import { useCartStore } from '@renderer/store/modules/cart'
const cart = useCartStore()
const props = defineProps({
  type: {
    type: String as PropType<'radio' | 'square'>,
    default: 'radio'
  },
  defaultValue: {
    type: Number,
    required: false
  },
  style: {
    type: Object,
    default: () => ({
      color: '#fff',
      'font-size': '14px',
      padding: '0 8px'
    })
  },
  width: {
    type: Number,
    default: 26
  },
  height: {
    type: Number,
    default: 26
  },
  maxValue: {
    type: Number,
    required: false
  },
  modelValue: {
    type: Number,
    required: false
  },
  isCombo: {
    type: Boolean,
    default: false
  }
})
const value = computed({
  get: () => props.modelValue || props.defaultValue || 0,
  set: (v) => {
    emit('update:modelValue', v)
  }
})
const emit = defineEmits(['update:modelValue', 'update:value', 'on-add', 'on-remove'])
const canAdd = computed(() => {
  return !props.maxValue || value.value <= props.maxValue
})
const canRemove = computed(() => {
  return value.value > 0
})
const computedStyle = computed(() => {
  return {
    color: '#fff',
    'font-size': '14px',
    padding: '0 8px',
    ...props.style
  }
})
const add = () => {
  if (canAdd.value) {
    value.value += 1
    emit('update:value', value.value)
    if (props.isCombo) {
      cart.updateRemoteComboSkus()
    } else {
      cart.updateRemoteSkus()
    }
  }
}
const remove = () => {
  if (canRemove.value) {
    value.value -= 1
    emit('update:value', value.value)
    if (props.isCombo) {
      cart.updateRemoteComboSkus()
    } else {
      cart.updateRemoteSkus()
    }
  }
}

const btnWidthAndHeight = computed(() => ({
  width: props.width + 'px',
  height: props.height + 'px'
}))
</script>

<style scoped></style>
